<template>
  <div class="home">
    <!-- 轮播和榜单 -->
    <el-row>
      <el-col :span="10">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="(item, i) in banner" :key="i">
            <h3><img :src="item.imageUrl" alt="" style="height: 300px" /></h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="13" style="margin-left: 10px">
        <el-row :gutter="24">
          <el-col :span="6" v-for="(item, i) in top" :key="i">
            <div class="grid-content bg-purple">
              <div>
                <img :src="item.coverImgUrl" alt="" style="width: 100%" />
              </div>
              <div
                v-for="(v, j) in item.tracks"
                :key="j"
                style="
                  text-align: left;
                  font-size: 14px;
                  padding-top: 10px;
                  padding-bottom: 10px;
                "
              >
                <span>
                  <a
                    href="#"
                    @click.prevent="search(v.first)"
                    style="padding-left: 10px"
                    class="shenglue"
                  >
                    {{ j + 1 }}、《{{ v.first }}》-{{ v.second }}
                  </a>
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 电台 -->
    <el-row :gutter="20">
      <el-col :span="10" style="margin-top: -60px">
        <div class="grid-content bg-purple">
          <h1
            style="
              margin-top: 10px;
              margin-bottom: 10px;
              font-size: 20px;
              padding-top: 5px;
            "
          >
            热门电台
          </h1>
          <div class="removefloat" style="text-align: left; font-size: 14px">
            <div
              v-for="(item, i) in djlist"
              :key="i"
              style="float: left; width: 25%; height: 155px; text-align: center"
            >
              <img :src="item.picUrl" alt="" style="width: 93px" />
              <p
                style="
                  margin-top: 10px;
                  margin-bottom: 5px;
                  cursor: pointer;
                  width: 100%;
                "
                @click="searchDj(item.id)"
              >
                {{ i + 1 }}、{{ item.name }}
              </p>
              <p
                style="margin-top: 10px; margin-bottom: 5px; cursor: pointer"
                @click="searchDj(item.id)"
              ></p>
            </div>
          </div>
        </div>
      </el-col>
      <!-- mv -->
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <h1 style="margin-bottom: 10px; font-size: 20px; padding-top: 5px">
            热门MV
          </h1>
          <div class="removefloat">
            <div
              v-for="(item, i) in mvlist"
              :key="i"
              style="float: left; width: 33%"
              @click="searchmv(item.id)"
            >
              <img
                :src="item.cover"
                alt=""
                style="width: 260px; cursor: pointer; height: 146px"
              />
              <p style="margin-top: 10px; margin-bottom: 5px; cursor: pointer">
                {{ item.name }}
              </p>
              <p style="margin-top: 10px; margin-bottom: 5px; cursor: pointer">
                艺人：{{ item.artistName }}
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getbanner, toplist, getPersonalized, mv } from "../../api/home";
import { searchforuser } from "../../api/toolsApi";

export default {
  data() {
    return {
      banner: [],
      top: [],
      djlist: [],
      mvlist: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 初始化
    async init() {
      const result = await getbanner();
      this.banner = result.banners;
      const result1 = await toplist();
      this.top = result1.list.splice(0, 4);
      console.log("top", this.top);
      const result2 = await getPersonalized();
      console.log(result2);
      this.djlist = result2.result.splice(0, 12);
      console.log("djlist", this.djlist);
      const result3 = await mv();
      console.log(result3);
      this.mvlist = result3.data.splice(0, 6);
    },
    // 榜单跳转
    async search(songName) {
      const result = await searchforuser({
        keywords: songName,
        type: 1,
      });
      this.$store.commit("Publiccomponent/submitSearch", result.result.songs);
      this.$router.push("/home/search/1");
    },
    // 电台跳转
    searchDj(id) {
      this.$router.push("/home/dj/" + id);
    },
    // mv跳转
    searchmv(id) {
      this.$router.push("/home/playVideo/" + id);
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  components: {},
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.removefloat::after {
  height: 0;
  display: block;
  overflow: hidden;
  content: "";
  clear: both;
}
.shenglue {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
